@import (reference) "~ui/styles/config";
@import (reference) "~ui/styles/themes";


.main-menu-component {
	width: @menu-width;
	animation: animFadeInLeft @anim-content-duration ease-out paused;

	html.initialized & {
		animation-play-state: running;
	}

	h3 {
		margin: 0 0 .2em @app-padding;
		font: lighter 1.75em @font-name;
		letter-spacing: -.025em;

		&:not(:first-of-type) {
			margin-top: .5em;
		}

		.theme({
			.theme-mix-color( @theme-mainmenu-headline-color, @theme-background );
		});
	}

	> menu, ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	li {
		position: relative;
		margin: .15em 0;

		> a {
			margin-left: @app-padding;
			text-decoration: none;
			font-weight: lighter;

			.theme({
				.theme-mix-color( @theme-mainmenu-anchor-color, @theme-background );

				&:hover {
					.theme-mix-color( @theme-mainmenu-anchor-color-hover, @theme-background );
				}

				&:active, &.active {
					.theme-mix-color( @theme-mainmenu-anchor-color-active, @theme-background );
				}
			});

			&.active {
				font-weight: normal;
			}

			&.active::before {
				@size: .5em;

				content: "";
				display: block;
				position: absolute;
				left: 0;
				top: 50%;
				width: 0;
				height: 0;
				margin-top: -@size;
				border-width: @size 0 @size @size;
				border-style: solid;
				border-color: transparent;
				border-left-color: @color-twitch-purple;
			}
		}
	}
}
